<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>搜索页</title>
    <link rel="stylesheet" href="./css/search.css" />
  </head>
  <body>
    <div class="container">
      <!-- logo -->
      <img src="./img/logo.png" />

      <div class="box">
        <!-- tab栏 -->
        <div class="tabs">
          <div class="tab-active">宝贝</div>
          <div>店铺</div>
        </div>

        <!-- 搜索区域(搜索框何搜索按钮) -->
        <div class="search-box">
          <input type="text" class="ipt" placeholder="请输入要搜索的内容" />
          <button class="btnSearch">搜索</button>
        </div>

        <!-- 搜索建议列表 -->
        <div id="suggest-List"></div>
      </div>
    </div>

    <script src="./js/jQuery3.6.js"></script>
    <script src="./js/art-template.js"></script>

    <script type="text/html" id="tpl-suggestList">
      {{each result}}
      <div class="suggest-item">{{$value[0]}}</div>
      {{/each}}
    </script>

    <script>
      $(function () {
        // 定义演示器ID
        var timer = null
        // 定义全局缓存对象
        var cacheObj = {}

        //设置演示器
        function debounceSearch(kw) {
          timer = setTimeout(function () {
            getSuggestList(kw);
          }, 500)
        }

        // 为输入框绑定Keyup事件
        $('.ipt').on('keyup', function () {
          clearTimeout(timer);
          var keyword = $(this).val().trim()
          if (keyword.length <= 0) {
            return $('#suggest-List').empty().hide()
          }

          // 先判断缓存中是否存有数据
          if(cacheObj[keyword]){
            return renderSuggestList(cacheObj[keyword])
          }

          debounceSearch(keyword);
        })

        // 跨域请求jsonp
        function getSuggestList(kw) {
          $.ajax({
            // 指定请求的URL地址，其中，q时用户输入的关键字
            url: 'https://suggest.taobao.com/sug?q=' + kw,
            // 指定要发起的时jsonp请求
            dataType: 'jsonp',
            // 成功的回调函数
            success: function (res) {
              console.log(res)
              renderSuggestList(res)
            },
          })
        }

        // 渲染建议列表
        function renderSuggestList(res) {
          // 如果没有需要渲染的数据，则直接return
          if (res.result.legnth <= 0) {
            return $('#suggest-List').empty().hide()
          }
          // 渲染模板结构
          var htmlStr = template('tpl-suggestList', res)
          $('#suggest-List').html(htmlStr).show()

          // 获取到用户输入的内容，当做
          var k = $('#ipt').val().trim()
          // 需要蒋数据作为值，进行缓存
          cacheObj[k] = res;

        }
      })
    </script>
  </body>
</html>
